<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--<script type="text/javascript" src="./bower/bootstrap/build/"></script>-->
</head>
<body>

<style type="text/css">
    html, body, div {
        margin: 0;
        border: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box;
    }

        /**
        .row-sm-2{
            position:relative;
            width:20%;
            float:left;
        }

        .row-sm-8{
            position:relative;
            width:80%;
            float:left;
        }

        .row:before {
            display: table;
            content: " ";
        }

        .row:after {
            display: table;
            content: " ";
        }
        :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .row:after {
            clear: both;
        }
        **/

    .row-sm-2 {
        border: 1px solid cadetblue;
        position: relative;
        width: 20%;
        display: inline-block;
    }

    .row-sm-8 {
        position: relative;
        width: 80%;
        display: inline-block;
    }

    .row-offset-2.row-sm-2 {
        position: relative;
        width: 20%;
        margin-left: 20%;
        display: inline-block;
    }
</style>

<div class="container">
    <div class="row">
        <div class="row-sm-2">part1(row-sm-2)</div>
        <div class="row-sm-8">part1(row-sm-10)</div>


    </div>

    <div class="row">
        <div class="row-sm-2 row-offset-2">part1(row-sm-2 row-offset-2)</div>
        <div class="row-sm-2">part1(row-sm-2)</div>
    </div>

    <div class="row">
        <div class="row-sm-2">part1(row-sm-2)</div>
        <div class="row-sm-8">part1(row-sm-10)</div>
        <div class="row-sm-2">part1(row-sm-2)</div>
    </div>
</div>

</body>
</html>